<template>
<el-scrollbar class="nav-menu my-scrollbar">
    <el-menu :collapse-transition="false" :collapse="true" router :default-active="$route.path.includes('projects')?`/${$route.path.split('/')[1]}`:$route.path" background-color="#070F1C" text-color="#fff" active-text-color="#ffd04b">
        <!-- <div class="show-nav" @click='handleClick'>
            <i style="padding-right:0;" class="iconfont daohang-icon" :class="!isCollapse?'iconfont icon-liebiaoshouqi':'iconfont icon-liebiaozhankai'"></i>
        </div> -->
        <template v-for="item in menuData">
            <!-- 此菜单下还有子菜单 -->
            <el-submenu v-if="item.childs&&item.entity&&!item.entity.isHide" :key="item.entity.id" :index="item.entity.path">
                <template slot="title">
                    <i :class="item.entity.icon"></i>
                    <span slot="title">{{item.entity.name}}</span>
                </template>
                <!-- 递归 -->
                <sub-menu :menuData="item.childs"></sub-menu>
            </el-submenu>
            <!--一级菜单 -->
            <el-menu-item v-if="!(item.childs&&item.entity)&&!item.entity.isHide" :key="item.entity.id" :index="item.entity.path">
                <i :class="item.entity.icon"></i>
                <span slot="title">{{item.entity.name}}</span>
            </el-menu-item>
        </template>
    </el-menu>
</el-scrollbar>
</template>

<script>
import SubMenu from './SubMenu'
export default {
    name: 'NavMenu',
    components: {
        SubMenu
    },
    data () {
        return {
            // isCollapse: false,
            menuData: [
                {
                    entity: {
                        isHide: false,
                        id: 0,
                        path: '/home',
                        icon: 'iconfont icon-shouye',
                        name: '首页'
                    }
                },
                {
                    entity: {
                        isHide: false,
                        id: 2,
                        path: '/projects',
                        icon: 'iconfont icon-xiangmuguanli',
                        name: '项目管理'
                    }
                },
                {
                    entity: {
                        isHide: false,
                        id: 3,
                        path: '/system',
                        icon: 'iconfont icon-xitongguanli',
                        name: '系统管理'
                    },
                    childs: [
                        {
                            entity: {
                                isHide: false,
                                id: 4,
                                path: '/system/user',
                                icon: 'iconfont icon-yonghuguanli',
                                name: '用户管理'
                            }
                        },
                        {
                            entity: {
                                isHide: false,
                                id: 6,
                                path: '/system/role',
                                icon: 'iconfont icon-jiaoseguanli',
                                name: '角色管理'
                            }
                        },
                        {
                            entity: {
                                isHide: false,
                                id: 7,
                                path: '/system/menu',
                                icon: 'iconfont icon-caidanguanli',
                                name: '菜单管理'
                            }
                        },
                        {
                            entity: {
                                isHide: false,
                                id: 5,
                                path: '/system/dep',
                                icon: 'iconfont icon-quanxianguanli',
                                name: '部门管理'
                            }
                        },
                        {
                            entity: {
                                isHide: false,
                                id: 52,
                                path: '/system/log',
                                icon: 'iconfont icon-quanxianguanli',
                                name: '日志管理'
                            }
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        handleClick () {
            this.isCollapse = !this.isCollapse
            this.$emit('isCollapse', this.isCollapse)
        }
    }
}
</script>

<style lang="less">
.nav-menu {
    overflow-x: hidden;
    width: 100%;
    height: 100%;

    .show-nav {
        cursor: pointer;
        color: #ffffff;
        height: 56px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .show-nav:hover {
        background: rgb(6, 12, 22);
    }
    .is-active {
        background: -webkit-linear-gradient(to right, #05efd7 , #03786c);
        background: -o-linear-gradient(to right, #05efd7, #03786c);
        background: -moz-linear-gradient(to right, #05efd7, #03786c);
        background: linear-gradient(to right, #05efd7 , #03786c);
    }
}
</style>
